<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>popup使用</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css"/>-->
		<style>
		</style>
		<script src="js/jquery1.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$.mobile.loading("show", {
					text: 'test'
				});
				$("#clo").click(function() {
					closeLoading();
				});
			});
			 //		     $(document).bind("mobileinit", function(){
			 //		    	alert('fd');
			 //		    	$.mobile.loading( "show", {
			 //			            text:'test',
			 //			    });
			 //		     });
			function closeLoading() {
				$.mobile.loading('hide');
			}
		</script>
	</head>

	<body>
		<div data-role="page" data-fullscreen="true" id="one" data-theme="a">
			<div data-role="header">
				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
				<h1>popup使用</h1>
			</div>
			<div data-role="ui-content">

				<button class="ui-btn ui-shadow ui-btn-active ui-icon-action" id="clo">关闭加载框</button>

				<div class="ui-grid-b">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-a">
							<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">基本Popup</a>
							<div data-role="popup" id="popupBasic">
								<p>基本popup使用</p>
							</div>
						</div>
					</div>
					<div class="ui-block-b">
						<div class="">

							<a href="#popupParis" data-rel="popup" data-position-to="window" data-inline="true" data-transition="fade">
								<img class="popphoto" src="img/logo.jpg" alt="Paris, France" style="width:30%">
							</a>
							<a href="#popupSydney" data-rel="popup" data-position-to="window" data-inline="true" data-transition="fade">
								<img class="popphoto" src="img/logo.jpg" alt="Sydney, Australia" style="width:30%">
							</a>
							<a href="#popupNYC" data-rel="popup" data-position-to="window" data-inline="true" data-transition="fade">
								<img class="popphoto" src="img/logo.jpg" alt="New York, USA" style="width:30%">
							</a>

							<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
								<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
								<img class="popphoto" src="img/logo.jpg" style="max-height:512px;" alt="Paris, France">
							</div>
							<div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
								<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
								<img class="popphoto" src="img/logo.jpg" style="max-height:512px;" alt="Sydney, Australia">
							</div>
							<div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
								<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
								<img class="popphoto" src="img/logo.jpg" style="max-height:512px;" alt="New York, USA">
							</div>

						</div>
					</div>
					<div class="ui-block-c">
						<div class="ui-bar ui-bar-a">

							<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">弹出列表</a>
							<div data-role="popup" id="popupMenu" data-theme="b">
								<ul data-role="listview" data-inset="true" style="min-width:210px;">
									<li data-role="list-divider">Choose an action</li>
									<li><a href="#">View details</a>
									</li>
									<li><a href="#">Edit</a>
									</li>
									<li><a href="#">Disable</a>
									</li>
									<li><a href="#">Delete</a>
									</li>
								</ul>
							</div>

							<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">选择</a>
							<div data-role="popup" id="popupNested" data-theme="none">
								<div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
									<div data-role="collapsible" data-inset="false">
										<h2>Farm animals</h2>
										<ul data-role="listview">
											<li><a href="#" data-rel="dialog">Chicken</a>
											</li>
											<li><a href="#" data-rel="dialog">Cow</a>
											</li>
											<li><a href="#" data-rel="dialog">Duck</a>
											</li>
											<li><a href="#" data-rel="dialog">Sheep</a>
											</li>
										</ul>
									</div>
									<!-- /collapsible -->
									<div data-role="collapsible" data-inset="false">
										<h2>Pets</h2>
										<ul data-role="listview">
											<li><a href="#" data-rel="dialog">Cat</a>
											</li>
											<li><a href="#" data-rel="dialog">Dog</a>
											</li>
											<li><a href="#" data-rel="dialog">Iguana</a>
											</li>
											<li><a href="#" data-rel="dialog">Mouse</a>
											</li>
										</ul>
									</div>
									<!-- /collapsible -->
									<div data-role="collapsible" data-inset="false">
										<h2>Ocean Creatures</h2>
										<ul data-role="listview">
											<li><a href="#" data-rel="dialog">Fish</a>
											</li>
											<li><a href="#" data-rel="dialog">Octopus</a>
											</li>
											<li><a href="#" data-rel="dialog">Shark</a>
											</li>
											<li><a href="#" data-rel="dialog">Starfish</a>
											</li>
										</ul>
									</div>
									<!-- /collapsible -->
									<div data-role="collapsible" data-inset="false">
										<h2>Wild Animals</h2>
										<ul data-role="listview">
											<li><a href="#" data-rel="dialog">Lion</a>
											</li>
											<li><a href="#" data-rel="dialog">Monkey</a>
											</li>
											<li><a href="#" data-rel="dialog">Tiger</a>
											</li>
											<li><a href="#" data-rel="dialog">Zebra</a>
											</li>
										</ul>
									</div>
									<!-- /collapsible -->
								</div>
								<!-- /collapsible set -->
							</div>
							<!-- /popup -->

						</div>
					</div>
				</div>
				<!-- /grid-b -->
				<div class="ui-grid-c">
					<div class="ui-block-a ui-bar-a">

						<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">
							登录框
						</a>
						<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
							<form>
								<div style="padding:10px 20px;">
									<h3>Please sign in</h3>
									<label for="un" class="ui-hidden-accessible">Username:</label>
									<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
									<label for="pw" class="ui-hidden-accessible">Password:</label>
									<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
									<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
								</div>
							</form>
						</div>

					</div>
					<div class="ui-block-b ui-bar-a">

						<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-b">确认框</a>
						<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
							<div data-role="header" data-theme="a">
								<h1>您确定删除么?</h1>
							</div>
							<div role="main" class="ui-content">
								<h3 class="ui-title">您确定删除此项么?</h3>
								<p>介绍</p>
								<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">取消</a>
								<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">确定</a>
							</div>
						</div>

					</div>
					<div class="ui-block-c ui-bar-a">

						<a href="#transitionExample" data-transition="none" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">No transition</a>
						<a href="#transitionExample" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Pop</a>
						<a href="#transitionExample" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Fade</a>
						<a href="#transitionExample" data-transition="flip" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Flip</a>
						<a href="#transitionExample" data-transition="turn" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Turn</a>
						<a href="#transitionExample" data-transition="flow" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Flow</a>
						<a href="#transitionExample" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Slide</a>
						<a href="#transitionExample" data-transition="slidefade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Slidefade</a>
						<a href="#transitionExample" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Slide up</a>
						<a href="#transitionExample" data-transition="slidedown" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup">Slide down</a>
						<div data-role="popup" id="transitionExample" class="ui-content" data-theme="a">
							<p>I'm a simple popup.</p>
						</div>

					</div>
					<div class="ui-block-d ui-bar-a">
						d
					</div>
				</div>

			</div>
			<div data-role="footer" data-position="fixed">
				<a>test</a>
			</div>
		</div>

	</body>

</html>